<template>
  <button :class="{ sghBtn: true, iconBtn: icon }" @click="_click">
    <div v-if="context">{{ context }}</div>
    <div v-html="icon" v-if="icon" class="sgh-btn-icon"></div>
  </button>
</template>

<script>
export default {
  name: "Button",
  props: ["context", "icon"],
  methods: {
    _click(){
      this.$emit('onClick');
    }
  },
};
</script>

<style lang="scss">
$btn-bg-color: #37404a;
$btn-border-color: #464f5b;
$btn-font-color: #aab8c5;
$btn-hover-color: #48aa4e;
.sghBtn {
  background-color: $btn-bg-color;
  border: none;
  border: 1px solid $btn-border-color;
  border-radius: 4px;
  color: $btn-font-color;
  height: 32px;
  padding: 0 15px;
  font-size: 12px;
  margin-left: 10px;
  cursor: pointer;

  .sgh-btn-icon {
    svg {
      height: 16px;
      width: 16px;
      path {
        fill: $btn-font-color;
      }
    }
  }
}

.sghBtn:hover,
.sghBtn:focus {
  outline: none;
  border-color: $btn-hover-color;
  color: $btn-hover-color;
  svg {
    path {
      fill: $btn-hover-color;
    }
  }
}

.sghBtn:focus {
  box-shadow: 0 0 4px 0 $btn-hover-color;
}

.iconBtn {
  padding: 0 10px;
}
</style>